<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="referrer" content="never">
    <title></title>
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('static/ecard/css/qr-code.css') }}" />
</head>
<body>
<div class="content">
    <div id="capture" style="width:100%;">
        <div class="head-portrait">
            <img src="{{ URL::asset('static/ecard/img/default.jpeg') }}" alt="头像" width="205" height="210">
            <div class="nane-content">我是
                <text class="nane">鸿佑卫鸿佑卫门鸿佑卫门鸿佑卫门鸿佑卫门门</text><br />
                我为<text class="ami">阿米日记</text>代言
            </div>
        </div>
        <div class="logo-img">
            <img width="100%" src="{{ URL::asset('static/ecard/img/logo.png') }}" alt="logo">
        </div>
        <div class="qr-code">
            <img src="{{ URL::asset('static/ecard/img/qr-code.jpg') }}" alt="二维码" width="350" height="350">
        </div>
    </div>
    <img id="screenShotImg">
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>
    // html2canvas(document.querySelector("#capture")).then(canvas => {
    //     $("#capture").hide();
    //     document.body.appendChild(canvas)
    // });
    screenShot($('#capture'),function (canvas,width,height) {
        document.querySelector('#screenShotImg').src = canvas;
        document.querySelector('#screenShotImg').style.width = width+"px";
        document.querySelector('#screenShotImg').style.height = height+"px";

    });

    /**
     * 截图功能
     * targetDom 要克隆的目标dom元素
     * cb 回调函数
     */
    function screenShot(targetDom,cb){
        $("#capture").hide();
        var copyDom = targetDom.clone();//克隆dom节点
        copyDom.css('display','block');
        $('body').append(copyDom);//把copy的截图对象追加到body后面
        var width = copyDom.width();//dom宽
        var height = copyDom.height();//dom高
        var scale = 2;//放大倍数
        var canvas = document.createElement('canvas');
        canvas.width = width*scale;//canvas宽度
        canvas.height = height*scale;//canvas高度
        var content = canvas.getContext("2d");
        content.scale(scale,scale);
        var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
        content.translate(-rect.left,-rect.top);//设置context位置，值为相对于视窗的偏移量负值，让图片复位
        html2canvas(copyDom, {
            allowTaint:true,
            tainTest:true,
            scale:scale,
            canvas:canvas,
            width:width,
            heigth:height,
            onrendered: function(canvas) {
                if(cb){
                    copyDom.css('display','none');
                    cb(canvas.toDataURL("image/png"),width,height);
                }
            }
        });
    }

</script>
</body>
</html>
